<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>元素的尺寸</title>
		<style type="text/css">
			div{
				width: 100px;
				height: 150px;
				background: red;
				padding: 10px;
				border: 10px #fbd850 solid;
				margin: 10px;
			}
		</style>
	</head>
	<body>
		<div>div</div>
		
		<!-- 1.内容尺寸
		  height(): height
		  width(): width
		2.内部尺寸
		  innerHeight(): height+padding
		  innerWidth(): width+padding
		3.外部尺寸
		  outerHeight(false/true): height+padding+border 如果是true,加上margin
		  outerWidth(false/true): width+padding+border 如果是true,加上margin -->
		
		<script type="text/javascript" src="../js/jquery-3.6.0.js"></script>
		<script type="text/javascript">
			var $div = $('div')
			//1.内容尺寸
			console.log($div.width(),$div.height())
			
			// 2.内部尺寸
			console.log($div.innerWidth(),$div.innerHeight())
			
			// 3.外部尺寸
			console.log($div.outerWidth(),$div.outerHeight())
			console.log($div.outerWidth(true),$div.outerHeight(true))
		</script>
	</body>
</html>
